<!DOCTYPE html>
<html>
    <body>

        <canvas id="myCanvas" width="300" height="300" style="border:1px solid #c3c3c3;">
            Your browser does not support the canvas element.
        </canvas>

        <script type="text/javascript">
            var move_1_x = 1;
            var move_1_y = 1;
            var move_2_x = -1;
            var move_2_y = -1;
            var temp = 1;
            var image_height = 400;
            var img_x = 0;
            var img_y = 400;
            var ctx_2;
            function draw(){
                var c=document.getElementById("myCanvas");
                var ctx_1=c.getContext("2d");                
                
                var img=new Image();
                var img_2=new Image();
                img.src="<?php echo $_Q_Url->_base()->url; ?>pages/html5/images/preview.jpg";
                img_2.src="<?php echo $_Q_Url->_base()->url; ?>pages/html5/images/preview_.jpg";
                
                ctx_1.drawImage(img,img_x+move_1_x-image_height,img_y-move_1_y, image_height, image_height);
                if(typeof(ctx_2) == 'object'){
                    ctx_2.drawImage(img_2,img_x+move_2_x-image_height,img_y-move_2_y, image_height, image_height);
                }
                if(move_1_x <= image_height * 2){
                    move_1_x++;
                    move_1_y++;                    
                }else{
//                    alert(move_1_x);
                    move_1_x = 1;
                    move_1_y = 1;
                }
                if(move_2_x <= image_height * 2 && move_2_x >=1){
                    move_2_x++;
                    move_2_y++;                    
                }else if(move_2_x >=1){
                    move_2_x = 1;
                    move_2_y = 1;
                }
                if(move_1_x == image_height){                    
                    if(temp == 1){
                        ctx_2=c.getContext("2d");
                        temp == 0;
                    }
                    move_2_x = 1;
                    move_2_y = 1;
                }
                myTimer = setTimeout("draw()", 10);
            }
            draw();
        </script>

    </body>
</html>

